<template>
    <div class="container" :style="execStyle">
        <el-tree :data="markDownDirData" :default-expand-all="true" :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
    </div>
</template>

<script name="MarkDownDirectoryComponent" setup lang="ts">
import {getCommonParamObj} from "@/utils/commonParamUtil";
import {computed, defineProps} from "vue";

let props = defineProps(['propJson', 'commonParam']);
let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let markDownDirData = computed(() => {
    if (propJson.value.editFlag) {
        return []
    }
    // 获取markDown容器对象
    let markDownContainerElementObj = getCommonParamObj(commonParam.value, propJson.value.markDownVariable);
    let markDownContainerElement = markDownContainerElementObj.variableValue;
    if (!markDownContainerElement) {
        return []
    }
    let contentChildrenList = markDownContainerElement.children;
    if (!contentChildrenList || contentChildrenList.length <= 0) {
        return []
    }
    let commonTreeList = [];
    let lastLevel = null;
    let currentObjList = commonTreeList;
    let preNodeObj = {};
    for (let i = 0; i < contentChildrenList.length; i++) {
        let header = contentChildrenList[i].localName;
        // 正则校验标签为h开头的数据
        if (/\b[h][0-9]\b/.test(header)) {
            // 遍历时顺带在标签上添加ID数据，方便后续点击跳转
            let currentElement = contentChildrenList[i];
            currentElement.setAttribute('id', "jumpId" + i);
            // 获取标题内容，此内容为后续目录菜单展示的label
            let name = currentElement.textContent;
            let paramObj = {
                id: i,
                label: name,
                children: [],
                parentNode: {}
            }
            // 判断当前层级
            header = header.replace('h', '')
            const level = parseInt(header, 10);
            if (lastLevel && level > lastLevel) {
                preNodeObj.children.push(paramObj)
                paramObj.parentNode = preNodeObj
                preNodeObj = paramObj;
            } else if (lastLevel && level < lastLevel) {
                while (lastLevel >= level) {
                    // 往上找出对应的结点数组
                    if (lastLevel === 1) {
                        currentObjList = commonTreeList;
                        preNodeObj = {};
                    } else {
                        currentObjList = preNodeObj.parentNode.children;
                        preNodeObj = preNodeObj.parentNode;
                    }
                    lastLevel--;
                }
                currentObjList.push(paramObj)
                paramObj.parentNode = preNodeObj
                preNodeObj = paramObj;
            } else if (lastLevel && level === lastLevel) {
                preNodeObj.parentNode.children.push(paramObj)
            } else {
                currentObjList.push(paramObj)
                paramObj.parentNode = preNodeObj
                preNodeObj = paramObj;
            }
            lastLevel = level;
        }
    }
    return commonTreeList;
})

let execStyle = computed(() => {
    let style = "";
    if (propJson.value.height) {
        style += "height: " + propJson.value.height;
    }
    return style;
})

function handleNodeClick(data) {
    // 获取markDown的容器对象
    let markDownContainerElementObj = getCommonParamObj(commonParam.value, propJson.value.markDownVariable);
    let markDownContainerElement = markDownContainerElementObj.variableValue;
    // 设置容器的滚动位置
    let goToElement = markDownContainerElement.querySelector("#jumpId" + data.id);
    let scrollPosition = goToElement.offsetTop - 20;
    // 进行滚动
    markDownContainerElement.scrollTo({
        left: 0,
        top: scrollPosition,
        behavior: 'smooth'
    });
}
</script>

<style scoped lang="less">
.container {
    width: 100%;
    overflow: auto;
}


/* 自定义整个滚动条 */
.container::-webkit-scrollbar {
    width: 5px; /* 设置滚动条的宽度 */
}

/* 自定义滚动条轨道 */
.container::-webkit-scrollbar-track {
    background: #f1f1f1; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */
.container::-webkit-scrollbar-thumb {
    background: #b7b7b7; /* 设置滑块的背景颜色 */
    border-radius: 20px;
}

/* 当滑块悬停或活动时的样式 */
.container::-webkit-scrollbar-thumb:hover {
    background: #a9a9a9; /* 设置滑块在悬停状态下的背景颜色 */
}
</style>